import {computed} from 'vue';

import {diff} from '@/utils/shared/utils';

import {preferencesManager} from './preferences';
import {isDarkTheme} from './update-css-variables';

function usePreferences() {
    const preferences = preferencesManager.getPreferences();
    const initialPreferences = preferencesManager.getInitialPreferences();
    /**
     * @zh_CN 计算偏好设置的变化
     */
    const diffPreference = computed(() => {
        return diff(initialPreferences, preferences);
    });

    const appPreferences = computed(() => preferences.app);

    const shortcutKeysPreferences = computed(() => preferences.shortcutKeys);

    /**
     * @zh_CN 判断是否为暗黑模式
     * @param  preferences - 当前偏好设置对象，它的主题值将被用来判断是否为暗黑模式。
     * @returns 如果主题为暗黑模式，返回 true，否则返回 false。
     */
    const isDark = computed(() => {
        return isDarkTheme(preferences.theme.mode);
    });

    const locale = computed(() => {
        return preferences.app.locale;
    });

    const isMobile = computed(() => {
        return appPreferences.value.isMobile;
    });

    const theme = computed(() => {
        return isDark.value ? 'dark' : 'light';
    });

    /**
     * @zh_CN 布局方式
     */
    const layout = computed(() =>
        isMobile.value ? 'sidebar-nav' : appPreferences.value.layout,
    );

    /**
     * @zh_CN 是否显示顶栏
     */
    const isShowHeaderNav = computed(() => {
        return preferences.header.enable;
    });

    /**
     * @zh_CN 是否全屏显示content，不需要侧边、底部、顶部、tab区域
     */
    const isFullContent = computed(
        () => appPreferences.value.layout === 'full-content',
    );

    /**
     * @zh_CN 是否侧边导航模式
     */
    const isSideNav = computed(
        () => appPreferences.value.layout === 'sidebar-nav',
    );

    /**
     * @zh_CN 是否侧边混合模式
     */
    const isSideMixedNav = computed(
        () => appPreferences.value.layout === 'sidebar-mixed-nav',
    );

    /**
     * @zh_CN 是否为头部导航模式
     */
    const isHeaderNav = computed(
        () => appPreferences.value.layout === 'header-nav',
    );

    /**
     * @zh_CN 是否为混合导航模式
     */
    const isMixedNav = computed(
        () => appPreferences.value.layout === 'mixed-nav',
    );

    /**
     * @zh_CN 是否包含侧边导航模式
     */
    const isSideMode = computed(() => {
        return isMixedNav.value || isSideMixedNav.value || isSideNav.value;
    });

    const sidebarCollapsed = computed(() => {
        return preferences.sidebar.collapsed;
    });

    /**
     * @zh_CN 是否开启keep-alive
     * 在tabs可见以及开启keep-alive的情况下才开启
     */
    const keepAlive = computed(
        () => preferences.tabbar.enable && preferences.tabbar.keepAlive,
    );

    /**
     * @zh_CN 登录注册页面布局是否为左侧
     */
    const authPanelLeft = computed(() => {
        return appPreferences.value.authPageLayout === 'panel-left';
    });

    /**
     * @zh_CN 登录注册页面布局是否为左侧
     */
    const authPanelRight = computed(() => {
        return appPreferences.value.authPageLayout === 'panel-right';
    });

    /**
     * @zh_CN 登录注册页面布局是否为中间
     */
    const authPanelCenter = computed(() => {
        return appPreferences.value.authPageLayout === 'panel-center';
    });

    /**
     * @zh_CN 内容是否已经最大化
     * 排除 full-content模式
     */
    const contentIsMaximize = computed(() => {
        const headerIsHidden = preferences.header.hidden;
        const sidebarIsHidden = preferences.sidebar.hidden;
        return headerIsHidden && sidebarIsHidden && !isFullContent.value;
    });

    /**
     * @zh_CN 是否启用全局搜索快捷键
     */
    const globalSearchShortcutKey = computed(() => {
        const {enable, globalSearch} = shortcutKeysPreferences.value;
        return enable && globalSearch;
    });

    /**
     * @zh_CN 是否启用全局注销快捷键
     */
    const globalLogoutShortcutKey = computed(() => {
        const {enable, globalLogout} = shortcutKeysPreferences.value;
        return enable && globalLogout;
    });

    const globalLockScreenShortcutKey = computed(() => {
        const {enable, globalLockScreen} = shortcutKeysPreferences.value;
        return enable && globalLockScreen;
    });

    /**
     * @zh_CN 偏好设置按钮位置
     */
    const preferencesButtonPosition = computed(() => {
        const {enablePreferences, preferencesButtonPosition} = preferences.app;

        // 如果没有启用偏好设置按钮
        if (!enablePreferences) {
            return {
                fixed: false,
                header: false,
            };
        }

        const {header, sidebar} = preferences;
        const headerHidden = header.hidden;
        const sidebarHidden = sidebar.hidden;

        const contentIsMaximize = headerHidden && sidebarHidden;

        const isHeaderPosition = preferencesButtonPosition === 'header';

        // 如果设置了固定位置
        if (preferencesButtonPosition !== 'auto') {
            return {
                fixed: preferencesButtonPosition === 'fixed',
                header: isHeaderPosition,
            };
        }

        // 如果是全屏模式或者没有固定在顶部，
        const fixed =
            contentIsMaximize ||
            isFullContent.value ||
            isMobile.value ||
            !isShowHeaderNav.value;

        return {
            fixed,
            header: !fixed,
        };
    });

    return {
        authPanelCenter,
        authPanelLeft,
        authPanelRight,
        contentIsMaximize,
        diffPreference,
        globalLockScreenShortcutKey,
        globalLogoutShortcutKey,
        globalSearchShortcutKey,
        isDark,
        isFullContent,
        isHeaderNav,
        isMixedNav,
        isMobile,
        isSideMixedNav,
        isSideMode,
        isSideNav,
        keepAlive,
        layout,
        locale,
        preferencesButtonPosition,
        sidebarCollapsed,
        theme,
    };
}

export {usePreferences};
